<!-- 抽奖 -->
<template>
  <view class="lucky" :style="luckyStyle">
    <aster-back font-color="#fff" />
    <!-- 转盘 -->
    <view class="lucky__list" :style="luckyListStyle">
      <view v-for="(item, index) in props.awardList" :key="index">
        <view v-if="index == 4" class="lucky__item y-b" @tap="start">
          <view class="lucky__item__content y">
            <image v-if="isNotEmpty(item.img)" :src="item.img" mode="widthFix" />
            <view style="margin-top: 5rpx" v-if="isNotEmpty(item.name)">
              <text style="font-size: 21rpx; font-weight: bold">{{ item.name }}</text>
            </view>
          </view>
        </view>

        <view v-else class="lucky__item" :class="index === sel ? 'y-b' : 'w-b'">
          <view class="lucky__item__content" :class="index == sel ? 'y' : 'w'">
            <image v-if="isNotEmpty(item.img)" :src="item.img" mode="widthFix" />
            <view style="margin-top: 5rpx">
              <text style="font-size: 21rpx; font-weight: bold">{{ item.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="lucky__hide">
      <button @click="setProbability">
        <icon class="iconfont icon-xin" type="" style="color: #610106; font-size: 12px" />
      </button>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import { onBeforeUnmount, reactive, ref } from 'vue';
  import { isNotEmpty } from '@/utils/is';
  import { LuckyModel } from '@/services/model/coinModel';
  import { Toast } from '@/utils/uniapi/prompt';
  import { onLoad } from '@dcloudio/uni-app';

  const props = defineProps({
    // 背景图
    bgImage: {
      type: String,
      default: () => '../../static/images/lucky/bg.png',
    },
    // 抽奖列表
    awardList: {
      type: Array<LuckyModel>,
      default: () => [],
    },
    // 中奖索引
    awardIndex: {
      type: Number,
      default: () => 0,
    },
  });

  const emits = defineEmits(['start', 'success', 'setProbability']);

  const luckyStyle = reactive({
    'background-image': "url('" + props.bgImage + "')",
    'background-position': 'center center',
    'background-size': '100% 100%',
    'background-repeat': 'no-repeat',
  });

  const sel = ref(-1);
  const fastNums = ref(0);
  const slowNums = ref(0);
  const time = ref(1000);
  const loopStatus = ref(true);
  const noClick = ref(true);

  const timer = ref();

  const initHeight = () => {
    uni.getSystemInfo({
      success: function (res) {
        const screenHeight = res.screenHeight;
        const top = ((screenHeight / 2 - 142) / screenHeight) * 100 - 0.2;
        luckyListStyle.top = top.toFixed(1) + '%';
        console.log('luckyTop', luckyListStyle.top);
      },
    });
  };

  const luckyListStyle = reactive({
    top: '30.8%',
  });

  onLoad(() => {
    initHeight();
  });

  // 点击开始抽奖
  const start = () => {
    emits('start');
  };

  // 开始抽奖
  const begin = () => {
    if (!noClick.value) {
      Toast('请勿频繁点击', {
        icon: 'none',
        position: 'bottom',
      });
      return;
    }
    noClick.value = false;
    fastNums.value = 0;
    slowNums.value = 0;
    time.value = 200;
    loopStatus.value = true;
    loop();
  };

  // 抽奖过程 控制
  const loop = () => {
    let sjNum = props.awardIndex;
    console.log(sjNum);
    if (!sel.value || sel.value < 9) {
      if (sel.value == 3) {
        sel.value = 0;
      } else if (sel.value === -1) {
        sel.value = 0;
      } else if (sel.value == 2) {
        sel.value = 5;
      } else if (sel.value == 5) {
        sel.value = 8;
      } else if (sel.value == 8) {
        sel.value = 7;
      } else if (sel.value == 7) {
        sel.value = 6;
      } else if (sel.value == 6) {
        sel.value = 3;
      } else {
        sel.value++;
      }
      fastNums.value++;
      if (fastNums.value == 4) {
        fastNums.value = 0;
        time.value = 50;
        slowNums.value++;
      }
      if (slowNums.value == 8) {
        slowNums.value = 0;
        time.value = 500;
        fastNums.value = 5;
      }
      if (fastNums.value > 5) {
        if (sel.value == sjNum) {
          noClick.value = true;
          loopStatus.value = false;
          // 成功的逻辑
          awardSuccess(sjNum);
        }
      }
      if (loopStatus.value) {
        timer.value = setTimeout(() => {
          loop();
        }, time.value);
      }
    }
  };

  // 中奖后的逻辑
  const awardSuccess = (index: number) => {
    emits('success', index);
  };

  const setProbability = () => {
    emits('setProbability');
  };

  // 退出页面时清除定时
  onBeforeUnmount(() => {
    clearInterval(timer.value);
  });

  defineExpose({
    begin,
  });
</script>
<style lang="scss" scoped>
  $aster-lucky-top: 30.8% !default;
  $aster-lucky-left: 9.7% !default;
  $aster-lucky-right: 0 !default;
  $aster-lucky-width: 80% !default;

  page {
    min-height: 1330rpx;
    position: relative;
    background-color: #1015f2 !important;
  }

  .lucky {
    height: 100vh;

    &__list {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      position: absolute;
      top: 30.8%;
      right: $aster-lucky-right;
      left: $aster-lucky-left;
      width: $aster-lucky-width;
    }

    &__item {
      width: 150rpx;
      height: 158rpx;
      border-radius: 30rpx;
      margin: 5rpx;

      &__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 150rpx;
        height: 138rpx;
        border-radius: 30rpx;

        image {
          width: 60rpx;
          height: 60rpx;
        }
      }
    }

    &__hide {
      padding-top: 60rpx;
      position: absolute;
      top: $aster-lucky-top + 38%;
      right: $aster-lucky-right;
      left: $aster-lucky-left + 68%;
      width: 20rpx;

      button {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        width: 20rpx;
        height: 20rpx;
        padding: 0rpx !important;
        border-radius: 50%;
      }
    }
  }

  .w {
    background-color: #fdf2ee;
  }

  .w-b {
    background-color: #f8d0c3;
  }

  .y {
    background-color: #fee610;
  }

  .y-b {
    background-color: #efcd22;
  }
</style>
